import { memo, ReactElement } from "react";
import { fetchSuggestList } from "@/store/modules/home";
import { getDetailInfo, IDetailInfo } from "@/services/modules/detail";
import wrapper from "@/store/index";
import Image from "next/image";
import styles from "./index.module.scss";

import type { FC } from "react";
import type { GetServerSideProps } from "next";

import GridView4 from "@/components/GridView4";
import classNames from "classnames";

export interface IProps {
  children?: ReactElement;
  detailData?: IDetailInfo;
}

const Detail: FC<IProps> = memo(function (props) {
  const { children, detailData = {} } = props;
  return (
    <>
      <div className={classNames(styles.container, "wrapper")}>
        <div className={styles["title-img"]}>
          <Image
            // className={styles["title-img"]}
            src={detailData.webPic!}
            fill
            alt="title-img"
            priority
          />
        </div>
        <GridView4 productList={detailData.products}></GridView4>
      </div>
    </>
  );
});

// 异步请求页面数据
export const getServerSideProps: GetServerSideProps =
  wrapper.getServerSideProps(function (store) {
    return async (context) => {
      // 发起网络请求,获取建议列表
      await store.dispatch(fetchSuggestList({}));
      const { id } = context.query;
      const res = await getDetailInfo(id as string);
      return {
        props: {
          detailData: res.data || {},
        },
      };
    };
  });

export default Detail;
Detail.displayName = "Detail";
